<template>
  <div class="home">
    <el-container>
      <el-col :span="3">
        <el-col :span="3" style="position:fixed;z-index:1;">
        <i class="el-icon-s-unfold" style="font-size:20px;margin-bottom:30px;margin-top:20px;"></i>
          <el-menu
          default-active="/"
          class="el-menu-vertical-demo"
          router
          @open="handleOpen"
          @close="handleClose"
          fixed="left">
              <el-menu-item index="1">
              <i class="el-icon-office-building"></i>
              <span slot="title" ref='aaa'>酒店</span>
              </el-menu-item>
              <el-menu-item index="2">
              <i class="el-icon-s-promotion"></i>
              <span slot="title" ref='aa'>机票</span>
              </el-menu-item>
              <el-menu-item index="3">
              <i class="el-icon-odometer"></i>
              <span slot="title">火车票</span>
              </el-menu-item>
              <el-menu-item index="/">
              <i class="el-icon-edit-outline"></i>
              <span slot="title" >攻略.景点</span>
              </el-menu-item>
          </el-menu>
        </el-col>
      </el-col>
    <el-container>    
    <el-header>
      <el-row class="header-row">
        <el-col :span="4" style="margin-top:10px;height:60px;">
          <img style="width:200px;" src="../assets/易游logo.png">
        </el-col>
        <el-col :span="3" style="margin-left:530px">
          <el-dropdown v-if="token === null">
            <div class="headFont" @click="login()">
              <img src="../img/Z80o180000013ulur1D76.jpg" class="headImg">
              &nbsp;&nbsp;
              <span>请登录</span>
              <el-dropdown-menu slot="dropdown">
              </el-dropdown-menu>
            </div>
          </el-dropdown>
          <el-dropdown v-if="token !== null" @command="handleCommand1">
              <div class="headFont">
                <img src="../img/Z80o180000013ulur1D76.jpg" class="headImg">
                &nbsp;&nbsp;
                <span>尊敬的...</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="PersonalHomepage" icon="el-icon-user-solid">个人信息</el-dropdown-item>
                <el-dropdown-item icon="el-icon-bank-card">我的钱包</el-dropdown-item>
                <el-dropdown-item command="MyCollection" icon="el-icon-star-on">我的收藏</el-dropdown-item>
                <el-dropdown-item icon="el-icon-notebook-2">常用信息</el-dropdown-item>
                <el-dropdown-item command="card" icon="el-icon-postcard">会员中心</el-dropdown-item>
                <el-dropdown-item command="quit" icon="el-icon-postcard">退出登录</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="2">
          <el-dropdown class="headOrder" @command="handleCommand">
              <div>
                <i class="el-icon-notebook-2"></i>
                <span style="cursor: pointer;">我的订单
              </span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="goOrder" icon="el-icon-tickets">全部订单</el-dropdown-item>
                <el-dropdown-item icon="el-icon-position">机票+相关订单</el-dropdown-item>
                <el-dropdown-item icon="el-icon-office-building">酒店订单</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-flag">旅游订单</el-dropdown-item>
                <el-dropdown-item icon="el-icon-odometer">火车订单</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col :span="1">
          <el-tooltip content="消息通知" placement="bottom">
            <i class="el-icon-message-solid"></i>
          </el-tooltip>
        </el-col>
        <el-col :span="1">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              <p style="color:blue;font-weight:bold;">访问客服中心</p><br/>境内：95010或400-830-6666
              <br/>中国香港：+852-3008-3295
              <br/>中国澳门：+86-21 3406-4888
              <br/>中国台湾：+86-21 3406-4888
              <br/>其它国家和地区：+86-21 3406-4888
              </div>
            <i class="el-icon-user"></i>
          </el-tooltip>
        </el-col>
        <el-col :span="1">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              <img src="../img/易游二维码.png" style="width:120px;height:112px;">
              <img src="../img/易游二维码.png" style="width:120px;height:112px;margin-left:20px;">
              <br/>
              <span style="font-size:10px;">扫描下载携程手机App</span>
              <span style="font-size:10px;margin-left:24px;">添加携程福利官领优惠</span>
              <br/>
              <p style="font-size:12px;font-weight:bold;margin-left:20px;">携程旅行手机版></p>
              </div>
            <i class="el-icon-mobile-phone"></i>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-header>
      <el-main style="overflow: hidden;"><router-view></router-view></el-main>
    </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    name:'home',
    data(){
        return{
          // token验证
          token: null
        }
    },
    mounted () {
      // 获取token令牌
      this.token = sessionStorage.getItem('token')
    },
    methods: {
      // 触发登录方法
      login () {
        this.$router.push({name: 'login'})
      },
      handleCommand1(command) {
        // 去到订单管理界面
        if (command === 'card') {
          this.$router.push({name: 'card'})
        }else if(command==='MyCollection'){
          this.$router.push({name: 'MyCollection'})
        }else if(command === 'quit') {
          this.message('退出成功', 'success')
          window.sessionStorage.removeItem('token')
          window.sessionStorage.removeItem('loginName')
          window.sessionStorage.removeItem('id')
          this.token = window.sessionStorage.getItem('token')
        }else if(command==='PersonalHomepage'){
          this.$router.push({name: 'PersonalHomepage'})
        }
      },
      handleCommand (command) {
        if (this.token !== null) {
          // 去到订单管理界面
          if (command === 'goOrder') {
            this.$router.push({name: 'OrderManager'})
          }
        } else {
          this.$router.push({name: 'login'})
        }
      },
      handleOpen(key, keyPath) {
            console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
            console.log(key, keyPath);
      },
      //消息提示框
      message(message,type){
          this.$message({
              message:message,
              type: type
          })
      },
    }
}
</script>

<style scoped>
.el-main{
  width:100%;
  height:100%;
}
/* 头部row标签 */
.header-row{
  width:1200px;
  margin: 0 auto;
  line-height:80px;
}
.header-row i{
  width:20px;
}
.headFont{
  width:116px;
  height:32px;
  border-radius:90px;
  background-color:rgb(192, 237, 248);
  color:rgb(51, 169, 238);
  font-weight: bold;
  line-height:30px;
}
.headFont:hover{
    cursor: pointer;
}
.headImg{
  width:24px;
  height:24px;
  border-radius:50%;
  margin-left:5px;
  vertical-align: middle;
}
  .headOrder{
  line-height:30px;
  width:100px;
}
.el-col-24{
  width:100px;
}
</style>